<template>
  <div class="product-like">
    <p class="title">- 猜你喜欢 -</p>
    <list :list="like" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import List from '@/views/product/components/list'
export default {
  name: 'ProductLike',
  components: {
    List
  },
  data() {
    return {
      like: []
    }
  },
  methods: {
    /**
     * get like product
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      const data = this.$store.getters['Like/like']
      if (data === null) {
        api.Product.like().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Like/set_data', data).then(() => {
            this.like = data
          })
        })
      } else {
        this.like = data
      }
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.product-like
  //margin 10px
  .title
    height 35px
    line-height 35px
    padding-top 15px
    font-weight 700
    font-size 16px
    color $main_color
</style>
